<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>抽奖</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
      list-style: none;
    }

    .box ul {
      margin: 180px auto 0;
      display: flex;
      flex-wrap: wrap;
      width: 600px;
    }

    .box li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10px;
      border: 3px solid #000;
      width: 150px;
      height: 150px;
      font-size: 24px;
      cursor: pointer;
    }

    .active {
      border: 3px solid red;
      background-color: skyblue;
      transform: scale(1.1);
    }

    .item {
      background-color: #000;
      color: red;
    }

    .begin {
      background-color: antiquewhite;
      color: thistle;
      cursor: pointer;
    }

    .txtBox {
      position: absolute;
      left: 5%;
      top: 10px;
      width: 200px;
      height: 200px;
      border: 2px dashed red;
      overflow: hidden;
    }

    .txtBox ul {
      transform: translateY(200px);
    }

    .txtBox li {
      height: 200px;
      line-height: 200px;
      text-align: center;
      font-size: 24px;
    }

    img {
      width: 60%;
      height: 60%;
    }

    .img1 {
      margin-top: 5%;
      margin-bottom: 5%;
      width: 90%;
      height: 90%;
    }

    .wrapper {
      position: absolute;
      left: 40%;
      top: 50px;
      width: 200px;
      height: 50px;
      background-color: thistle;
      overflow: hidden;
      text-align: center;
      font-size: 24px;
      line-height: 50px;
    }

    .wrapper ul {
      transform: translateY(50px);
    }
  </style>
</head>

<body>

  <div class="txtBox">
    <ul>
      <li><img src="./image/wanzi.jpg" alt="" class="img1"></li>
      <li><img src="./image/duola.jfif" alt="" class="img1"></li>
      <li><img src="./image/labi.jfif" alt="" class="img1"></li>
      <li><img src="./image/mao.jfif" alt="" class="img1"></li>
      <li><img src="./image/qiya.jfif" alt="" class="img1"></li>
      <li><img src="./image/lufei.jfif" alt="" class="img1"></li>
      <li><img src="./image/nidouzi.jpg" alt="" class="img1"></li>
      <li><img src="./image/laoshu.jpg" alt="" class="img1"></li>
    </ul>
  </div>
  <div class="box">
    <ul>
      <li>
        <img src="./image/wanzi.jpg" alt=""><span>小丸子</span>
      </li>
      <li>
        <img src="./image/duola.jfif" alt=""><span>哆啦</span>
      </li>
      <li>
        <img src="./image/labi.jfif" alt=""><span>小新</span>
      </li>
      <li>
        <img src="./image/laoshu.jpg" alt=""><span>杰瑞</span>
      </li>
      <li class="item">点击抽奖</li>
      <li>
        <img src="./image/mao.jfif" alt=""><span>汤姆</span>
      </li>
      <li>
        <img src="./image/nidouzi.jpg" alt=""><span>祢豆子</span>
      </li>
      <li>
        <img src="./image/lufei.jfif" alt=""><span>路飞</span>
      </li>
      <li>
        <img src="./image/qiya.jfif" alt=""><span>奇犽</span>
      </li>
    </ul>
  </div>
  <div class="wrapper">
    <ul>
      <li>小丸子</li>
      <li>哆啦</li>
      <li>小新</li>
      <li>汤姆</li>
      <li>奇犽</li>
      <li>路飞</li>
      <li>祢豆子</li>
      <li>杰瑞</li>
    </ul>
  </div>


  <script>
    let lis = document.querySelectorAll(".box li:not(:nth-child(5))");
    let txtBoxUl = document.querySelector(".txtBox ul");
    let wrapperUl = document.querySelector(".wrapper ul");
    let center = document.querySelector(".item");
    let index = 0;
    let lastIndex = 0;
    let indexRun = [0, 1, 2, 4, 7, 6, 5, 3];
    let speed = 200;
    let num = 0;
    let flag = false;
    let liHeight = getComputedStyle(txtBoxUl.firstElementChild).height;
    let wraLiHeight = getComputedStyle(wrapperUl.firstElementChild).height;

    function run() {
      // debugger;
      lis[indexRun[lastIndex]].classList.remove("active");
      lis[indexRun[index % 8]].classList.add("active");
      lastIndex = index % 8;

      if (index <= 30 && speed > 40) {
        speed -= 25;
      }
      if (index > 60 && speed < 400) {
        speed += 15;
      }

      //奖品信息轮播
      prize();

      if (index === num) {
        flag = false;
      } else {
        setTimeout(run, speed);
      }

      index++;
    }

    //奖品信息轮播
    function prize() {
      if (index) {
        if (speed > 70) {
          txtBoxUl.style.transition = `all 40ms`;
          txtBoxUl.style.transform = `translateY(-${liHeight})`;

          wrapperUl.style.transition = `all 40ms`;
          wrapperUl.style.transform = `translateY(-${wraLiHeight})`;
        } else {
          txtBoxUl.appendChild(txtBoxUl.firstElementChild);

          wrapperUl.appendChild(wrapperUl.firstElementChild);
        }
      } else {
        txtBoxUl.style.transform = `translateY(0px)`;

        wrapperUl.style.transform = `translateY(0px)`;
      }
    }

    txtBoxUl.addEventListener("transitionend", () => {
      if (index > 1) {
        txtBoxUl.appendChild(txtBoxUl.firstElementChild);
        txtBoxUl.setAttribute("style", "transform:translateY(0px)");

        wrapperUl.appendChild(wrapperUl.firstElementChild);
        wrapperUl.setAttribute("style", "transform:translateY(0px)");
      }
    })


    center.addEventListener("click", () => {
      if (!flag) {
        flag = true;
        num = Math.round((Math.random() * 7) + 80);
        console.log(num);
        lis[indexRun[lastIndex % 8]].classList.remove("active");
        txtBoxUl.style.transform = `translateY(200px)`;

        wrapperUl.style.transform = `translateY(50px)`;
        while (true) {
          if (lastIndex == lis.length) {
            break;
          }
          txtBoxUl.appendChild(txtBoxUl.firstElementChild);

          wrapperUl.appendChild(wrapperUl.firstElementChild);

          lastIndex++;
        }
        index = lastIndex = 0;

        setTimeout(run, speed);
      }
    })

  </script>

</body>

</html>